<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原子习惯 - 添加习惯</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div class="status-bar">
      <div class="time">9:41</div>
      <div class="icons">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>
    
    <div class="nav-bar">
      <div class="back" data-nav="dashboard.html">
        <i class="fas fa-chevron-left"></i> 取消
      </div>
      <div class="title">添加习惯</div>
      <div class="action" id="saveHabit">
        保存
      </div>
    </div>
    
    <div class="screen-container">
      <form id="addHabitForm">
        <!-- Basic Info -->
        <div class="card">
          <div class="form-group">
            <label class="form-label" for="habitName">习惯名称 *</label>
            <input type="text" class="form-control" id="habitName" placeholder="例如：晨间冥想" required>
          </div>
          
          <div class="form-group">
            <label class="form-label" for="habitDescription">描述</label>
            <textarea class="form-control" id="habitDescription" rows="2" placeholder="详细描述这个习惯..."></textarea>
          </div>
          
          <div class="form-group">
            <label class="form-label" for="habitCategory">类别</label>
            <select class="form-control" id="habitCategory">
              <option value="">选择类别</option>
              <option value="health">健康</option>
              <option value="fitness">健身</option>
              <option value="learning">学习</option>
              <option value="mindfulness">正念</option>
              <option value="productivity">生产力</option>
              <option value="finance">财务</option>
              <option value="social">社交</option>
              <option value="custom">自定义...</option>
            </select>
          </div>
          
          <div class="form-group">
            <label class="form-label">图标</label>
            <div class="icon-selector">
              <div class="icon-option selected"><i class="fas fa-spa"></i></div>
              <div class="icon-option"><i class="fas fa-book"></i></div>
              <div class="icon-option"><i class="fas fa-dumbbell"></i></div>
              <div class="icon-option"><i class="fas fa-apple-alt"></i></div>
              <div class="icon-option"><i class="fas fa-brain"></i></div>
              <div class="icon-option"><i class="fas fa-bed"></i></div>
              <div class="icon-option"><i class="fas fa-running"></i></div>
              <div class="icon-option"><i class="fas fa-tint"></i></div>
              <div class="icon-option"><i class="fas fa-plus"></i></div>
            </div>
          </div>
        </div>
        
        <!-- Schedule -->
        <div class="card">
          <h3>习惯计划</h3>
          
          <div class="form-group">
            <label class="form-label">频率</label>
            <select class="form-control" id="habitFrequency">
              <option value="daily">每天</option>
              <option value="weekly">每周几次</option>
              <option value="monthly">每月几次</option>
            </select>
          </div>
          
          <div class="form-group" id="weekdaysSelector">
            <label class="form-label">重复的日子</label>
            <div class="weekday-selector">
              <div class="weekday-option selected">一</div>
              <div class="weekday-option selected">二</div>
              <div class="weekday-option selected">三</div>
              <div class="weekday-option selected">四</div>
              <div class="weekday-option selected">五</div>
              <div class="weekday-option selected">六</div>
              <div class="weekday-option selected">日</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label" for="habitTime">时间</label>
            <input type="time" class="form-control" id="habitTime" value="08:00">
          </div>
          
          <div class="form-group">
            <label class="form-label" for="habitDuration">持续时间</label>
            <div class="duration-input">
              <input type="number" class="form-control" id="habitDuration" value="10" min="1">
              <select class="form-control" id="habitDurationUnit">
                <option value="minutes">分钟</option>
                <option value="hours">小时</option>
              </select>
            </div>
          </div>
        </div>
        
        <!-- 原子习惯四法则 -->
        <div class="card">
          <h3>习惯设计（四法则）</h3>
          
          <div class="form-group">
            <label class="form-label" for="cueInput">
              <i class="fas fa-eye text-primary"></i> 提示（让它显而易见）
            </label>
            <input type="text" class="form-control" id="cueInput" placeholder="什么会提醒你执行这个习惯？">
            <small class="text-secondary">例如：放一本书在枕边作为阅读提醒</small>
          </div>
          
          <div class="form-group">
            <label class="form-label" for="cravingInput">
              <i class="fas fa-heart text-primary"></i> 渴望（让它有吸引力）
            </label>
            <input type="text" class="form-control" id="cravingInput" placeholder="如何让这个习惯更有吸引力？">
            <small class="text-secondary">例如：与朋友一起健身，更有动力</small>
          </div>
          
          <div class="form-group">
            <label class="form-label" for="responseInput">
              <i class="fas fa-check text-primary"></i> 反应（让它容易做到）
            </label>
            <input type="text" class="form-control" id="responseInput" placeholder="如何让这个习惯更容易执行？">
            <small class="text-secondary">例如：提前准备好运动装备</small>
          </div>
          
          <div class="form-group">
            <label class="form-label" for="rewardInput">
              <i class="fas fa-gift text-primary"></i> 奖励（让它令人满足）
            </label>
            <input type="text" class="form-control" id="rewardInput" placeholder="完成后给自己什么奖励？">
            <small class="text-secondary">例如：冥想后喝一杯喜欢的茶</small>
          </div>
        </div>
        
        <!-- Habit Stacking -->
        <div class="card">
          <h3>习惯叠加</h3>
          <div class="form-group">
            <label class="form-label" for="habitStack">与已有习惯连接</label>
            <select class="form-control" id="habitStack">
              <option value="">不连接</option>
              <option value="wakeup">起床后</option>
              <option value="breakfast">早餐后</option>
              <option value="lunch">午餐后</option>
              <option value="dinner">晚餐后</option>
              <option value="beforeBed">睡前</option>
            </select>
            <small class="text-secondary">在已有习惯之后立即执行新习惯，更容易坚持</small>
          </div>
        </div>
        
        <!-- Reminder -->
        <div class="card">
          <h3>提醒设置</h3>
          <div class="flex flex-between">
            <div>
              <p>启用提醒</p>
              <p class="text-secondary">每天 08:00</p>
            </div>
            <label class="switch">
              <input type="checkbox" checked>
              <span class="slider"></span>
            </label>
          </div>
        </div>
        
        <div class="mt-20 mb-20">
          <button type="submit" class="btn btn-primary btn-block">添加习惯</button>
        </div>
      </form>
    </div>
  </div>

  <style>
    /* Add Habit specific styles */
    .icon-selector {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .icon-option {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--background-color);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 24px;
      color: var(--text-color);
    }
    
    .icon-option.selected {
      background-color: var(--primary-color);
      color: white;
    }
    
    .weekday-selector {
      display: flex;
      gap: 5px;
      margin: 10px 0;
    }
    
    .weekday-option {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--background-color);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    
    .weekday-option.selected {
      background-color: var(--primary-color);
      color: white;
    }
    
    .duration-input {
      display: flex;
      gap: 10px;
    }
    
    .duration-input input {
      flex: 1;
    }
    
    .duration-input select {
      width: 100px;
    }
    
    small {
      font-size: 12px;
      display: block;
      margin-top: 5px;
    }
  </style>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Icon selector
      const iconOptions = document.querySelectorAll('.icon-option');
      iconOptions.forEach(option => {
        option.addEventListener('click', function() {
          iconOptions.forEach(opt => opt.classList.remove('selected'));
          this.classList.add('selected');
        });
      });
      
      // Weekday selector
      const weekdayOptions = document.querySelectorAll('.weekday-option');
      weekdayOptions.forEach(option => {
        option.addEventListener('click', function() {
          this.classList.toggle('selected');
        });
      });
      
      // Save habit
      document.getElementById('saveHabit').addEventListener('click', function() {
        document.getElementById('addHabitForm').dispatchEvent(new Event('submit'));
      });
      
      // Form submission
      document.getElementById('addHabitForm').addEventListener('submit', function(e) {
        e.preventDefault();
        // In a real app, this would save the habit data
        window.location.href = 'dashboard.html';
      });
    });
  </script>
  
  <script src="js/app.js"></script>
</body>
</html>
